<html>
<head>
	<title>登录</title>
	<meta name="decorator" content="default" charset="UTF-8"/>
	<link rel="stylesheet" href="../css/public.css">
	<style>
		*{margin: 0 auto;}
		.container{
			position: relative;
			top: 100px;
		}
		.news-nav{
			clear: both;
			height: 80px;
			margin-left: 10px;
			margin-right: 10px;
			width: 250px;
			margin: 0 auto;
		}
		.news-nav li{
			float: left;
			list-style-type: none;
			margin: 0 10px;
			font-size: 30px;
			display: block;
			width: 86px;
			height: 79px;
			text-align: center;
			line-height: 79px;
			font-weight: bold;
			color: #007bff;
			cursor: pointer;
		}
		.news-nav li.on{
			color: #74dcff;
			border-bottom-color: #74dcff;
			border-bottom-style: solid;
			border-bottom-width: 2px;
		}
		#index-news-list-2{
			display: none;
		}
		.modal-dialog{
			max-width: 100% !important;
		}
		.modal-content{
			background: rgba(53,75,105,0.5);
			width: 500px;
			border-radius: 20px;
		}
		.loginForm{
			width: 400px;
		}
		.loginForm .form-group{
			margin: 30px 0;
		}
		.top {display: flex;align-items: center;margin-bottom: 10px;}
		.loginForm .form-group .form-control{
			height: 50px;
			font-size: 15px;
			width: 100%;
			padding: 0 0 0 10px;
			border-radius: 5px;
			border: 1px solid rgba(0, 0, 0, 0.2);
			background: rgba(53, 75, 105, 0.5);
			color: #cfe2f3;
			outline: none;
			margin-right: 15px;
		}
		.btn-primary{
			width: 100%;
			height: 50px;
			font-size: 24px;
			font-family: STKaiti;
			border-radius: 5px;
			color: gold;
			background: rgba(53, 75, 105, 0.5);
			border: none;
			cursor: pointer;
			outline: none;
			margin-bottom: 40px;
		}
		#头像box {
			display: flex;
			align-items: center;
			width: 50px;
			height: 50px;
			cursor: pointer;
			font-size: 14px;
		}
		#fileImg {display: none;vertical-align: middle;}
		#img {max-width: 50px;}
		#fileBox {
			position: relative;
			display: inline-block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border: 1px solid rgba(0,0,0,0.2);
			background: rgba(53,75,105,0.5);
			border-radius: 5px;
			color: gold;
			text-align: center;
			cursor: pointer;
		}
		#file {
			position: absolute;
			opacity: 0;
			width: 50px;
			height: 50px;
			cursor: pointer;
			padding: 0;
			margin-left: -12px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="modal-dialog" id="login_form">
		<div class="modal-content">
			<div class="modal-title">
				<ul class="news-nav js-nav-title">
					<li class="on" data="login" id="loginTab">登录</li>
					<li class="" data="register" id="registerTab">注册</li>
				</ul>
			</div>
			<div class="modal-body index-news-list" id="index-news-list-1">
				<form class="loginForm" id="loginForm" action="" method="post">
					<div class="form-group top">
						<input class="form-control required" name="name" id="name" type="text" placeholder="请输入用户名">
						<div id="头像box">
							<div id="fileImg"><img src="" id="img" width="50"></div>
							<div id="fileBox">
								<input type="file" id="file" class="file" multiple="multiple" accept="image/jpeg,image/png,image/jpg">
								<span style="cursor: pointer;">头像</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<button class="btn btn-primary" type="submit" onclick="connectWebSocket()">登录</button>
					</div>
				</form>
			</div>

			<div class="modal-body index-news-list" id="index-news-list-2">
				<form class="loginForm" id="registerForm" action="" method="post">
					<div class="form-group top">
						<input class="form-control required" name="name" id="name" type="text" placeholder="请输入要注册的用户名">
						<div id="头像box">
							<div id="fileImg"><img src="" id="img" width="50"></div>
							<div id="fileBox">
								<input type="file" id="file" class="file" multiple="multiple" accept="image/jpeg,image/png,image/jpg">
								<span style="cursor: pointer;">头像</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<button class="btn btn-primary" type="submit">注册</button>
					</div>
				</form>
			</div>

		</div>
	</div>
</div>
<script>
	let loginTab = document.getElementById('loginTab');
	let registerTab = document.getElementById('registerTab');
	loginTab.onclick = function (e){
		loginTab.className = "on";
		registerTab.className = "";
		document.getElementById('index-news-list-1').style.display = "block";
		document.getElementById('index-news-list-2').style.display = "none";
	}
	registerTab.onclick = function (e){
		registerTab.className = "on";
		loginTab.className = "";
		document.getElementById('index-news-list-2').style.display = "block";
		document.getElementById('index-news-list-1').style.display = "none";
	}

	let file = document.getElementById('file'); // 选择文件
	let fileBox = document.getElementById('fileBox'); // 选择文件box
	let img = document.getElementById('img'); // 头像img标签
	let fileImg = document.getElementById('fileImg'); // 头像img标签box
	let imgBase64 = "",fileSuffix = "";
	file.onchange = function (e){
		if (e.target.files.length>0){
			var selectedImage = e.target.files[0];
			var fileSize = selectedImage.size / 1024; // 转换为KB
			if (fileSize > 1024) {messageplugin({ message: "文件大小不得超过1MB", type: "error" });return;}
			var name = selectedImage.name;
			fileSuffix = name.slice(name.lastIndexOf(".")).replace("e",""); // 获取文件后缀
			img.src = getFileURL(selectedImage);
			fileImg.style.display = "inline-block";
			fileBox.style.display = "none";
			var fileReader = new FileReader();
			fileReader.readAsDataURL(selectedImage); // 文件读取为url
			fileReader.onload = function(e) {
				imgBase64 = e.target.result; // 获取头像的base64
			}
		}
	}
	//获取文件地址
	function getFileURL(file) {
		var url = null ;
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		return url;
	}
</script>
</body>
</html>